<script setup lang="ts">
import { computed, ref } from 'vue'

// 定义水果对象的类型
interface Fruit {
  id: number
  icon: string
  isChecked: boolean
  num: number
  price: number
}

// 水果列表
const fruitList = ref<Fruit[]>([
  {
    id: 1,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
    isChecked: true,
    num: 2,
    price: 6
  },
  {
    id: 2,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
    isChecked: false,
    num: 7,
    price: 20
  },
  {
    id: 3,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
    isChecked: false,
    num: 3,
    price: 40
  },
  {
    id: 4,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
    isChecked: false,
    num: 10,
    price: 3
  },
  {
    id: 5,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
    isChecked: false,
    num: 20,
    price: 34
  }
])

// 根据 id 删除数据
const remoteItemById = (id: number) => {
  // console.log(id)
  // 基于 id 删除
  // filter：保留 除传入 id 以外的所有元素即可
  const list = fruitList.value.filter((v) => v.id !== id)
  fruitList.value = list
}

// 根据 id 累加
const addById = (id: number) => {
  // console.log(id)
  // 根据 id 找到元素，累加
  // find根据条件检索元素找到了就是那唯一的一个，找不到 undefined
  const res = fruitList.value.find((v) => v.id === id)
  // console.log(res)res.
  res!.num++
}
// 根据 id 递减
const subById = (id: number) => {
  console.log(id)
  // 根据 id 找到元素，递减（大于 1）
  const res = fruitList.value.find((v) => v.id === id)
  // 屏蔽特殊情况
  if (res!.num <= 1) {
    return
  }
  res!.num--
}

// 全选
const isCheckAll = computed({
  get(){
    return fruitList.value.every((v)=> v.isChecked)
  },
  set(value){
fruitList.value.forEach((v)=>(v.isChecked = value))
  }
})

</script>

<template>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box">
      <img src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/sg_top.png" alt="" />
    </div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div v-if="fruitList.length > 0" class="main">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div v-for="item in fruitList" :key="item.id" class="tr active">
            <div class="td"><input v-model="item.isChecked" type="checkbox" checked /></div>
            <div class="td">
              <img :src="item.icon" alt="" />
            </div>
            <div class="td">{{ item.price }}</div>
            <div class="td">
              <div class="my-input-number">
                <button @click="subById(item.id)" class="decrease">-</button>
                <span class="my-input__inner">{{ item.num }}</span>
                <button @click="addById(item.id)" class="increase">+</button>
              </div>
            </div>
            <div class="td">{{ item.price * item.num }}</div>
            <div class="td"><button @click="remoteItemById(item.id)">删除</button></div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <input  type="checkbox" v-model="isCheckAll" />
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box"
            >总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">24</span></span
          >
          <!-- 结算按钮 -->
          <button class="pay">结算( 6 )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div v-else class="empty">🛒空空如也</div>
  </div>
</template>

<style scoped>
/* css中的导入语法 */
@import './style/inputnumber.css';
@import './style/index.css';
</style>
